<template>
  <div class="register-page">
    <div class="register-wrapper">
      <div class="register-card">
        <div class="register-header">
          <h2>注册</h2>
          <p>创建您的账户</p>
        </div>

        <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号" />
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              type="password"
              show-password
              placeholder="请输入密码"
            />
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="form.confirmPassword"
              type="password"
              show-password
              placeholder="请再次输入密码"
            />
          </el-form-item>

          <el-form-item label="身份" prop="role">
  <el-select v-model="form.role" placeholder="请选择身份">
    <el-option label="病人" value="病人" />
    <el-option label="医生" value="医生" />
    <el-option label="管理员" value="管理员" />
  </el-select>
</el-form-item>

          <el-form-item label="验证码" prop="captcha">
            <div class="captcha-row">
              <el-input
                v-model="form.captcha"
                maxlength="4"
                placeholder="请输入验证码"
              />
              <img
                :src="captchaImgSrc"
                alt="验证码"
                class="captcha-img"
                @click="refreshCaptcha"
                title="点击刷新"
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :loading="loading" @click="onSubmit">
              注册
            </el-button>
            <el-button link @click="goLogin">已有账号？去登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getCaptcha, register } from '@/api/auth'

const router = useRouter()
const formRef = ref()
const loading = ref(false)
const form = ref({ username: '', password: '', confirmPassword: '', captcha: '', captchaKey: '' ,role: '',})

const validateConfirm = (rule, value, callback) => {
  if (!value) return callback(new Error('请再次输入密码'))
  if (value !== form.value.password) return callback(new Error('两次输入的密码不一致'))
  callback()
}

const rules = {
  username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6位', trigger: 'blur' }
  ],
  confirmPassword: [{ validator: validateConfirm, trigger: 'blur' }],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  role: [{ required: true, message: '请选择身份', trigger: 'change' }], // 新增
}

const captchaImgSrc = ref('')
const refreshCaptcha = async () => {
  try {
    const { data } = await getCaptcha()
    form.value.captchaKey = data.key
    captchaImgSrc.value = `data:image/png;base64,${data.image}`
  } catch (e) {
    ElMessage.error(e.message || '获取验证码失败')
  }
}

onMounted(refreshCaptcha)

const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      const res = await register({
        username: form.value.username,
        password: form.value.password,
        captcha: form.value.captcha,
        key: form.value.captchaKey,
        role: form.value.role, // 新增
      })
      if (res.success || res.code === 200) {
        ElMessage.success('注册成功，请登录')
        router.push('/auth/login')
      } else {
        throw new Error(res.message || '注册失败')
      }
    } catch (e) {
      ElMessage.error(e.message || '注册失败')
      refreshCaptcha()
    } finally {
      loading.value = false
    }
  })
}

// 跳转至登录页
const goLogin = () => router.push('/auth/login')
</script>

<style scoped>
/* 背景图 + 遮罩 */
.register-page {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* 多色动态渐变背景：青色、白色、绿色、蓝色同时存在，位置动态变化 */
  background: radial-gradient(circle at 20% 30%, #26c6da 0%, transparent 40%),
              radial-gradient(circle at 80% 20%, #e0f7fa 0%, transparent 50%),
              radial-gradient(circle at 60% 80%, #43a047 0%, transparent 50%),
              radial-gradient(circle at 30% 70%, #1976d2 0%, transparent 60%);
  background-color: #e0f7fa;
  animation: register-bg-move 16s linear infinite alternate;
}
@keyframes register-bg-move {
  0% {
    background-position: 20% 30%, 80% 20%, 60% 80%, 30% 70%;
  }
  25% {
    background-position: 40% 10%, 70% 40%, 80% 60%, 10% 80%;
  }
  50% {
    background-position: 60% 60%, 30% 80%, 20% 30%, 80% 20%;
  }
  75% {
    background-position: 80% 40%, 10% 60%, 40% 80%, 60% 10%;
  }
  100% {
    background-position: 20% 30%, 80% 20%, 60% 80%, 30% 70%;
  }
}

.register-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(38,198,218,0.18) 0%, rgba(25,118,210,0.12) 100%);
  backdrop-filter: blur(2px);
  z-index: 1;
}

/* 注册卡片静止且半透明 */
.register-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-card {
  background: rgba(255,255,255,0.85);
  border-radius: 18px;
  padding: 36px 32px;
  box-shadow: 0 8px 32px rgba(38,198,218,0.12), 0 2px 8px rgba(25,118,210,0.08);
  backdrop-filter: blur(10px);
}

/* 标题 */
.register-header {
  text-align: center;
  margin-bottom: 24px;
}
.register-header h2 {
  font-size: 28px;
  color: #0097a7;
  margin: 0 0 6px;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 2px 8px #b2dfdb;
}
.register-header p {
  font-size: 14px;
  color: #546e7a;
  letter-spacing: 1px;
}

/* 表单项 */
.el-form-item {
  margin-bottom: 18px;
}
:deep(.el-form-item__label) {
  color: #1976d2;
  font-weight: 500;
  font-size: 15px;
}

/* 输入框 */
:deep(.el-input__inner) {
  border-radius: 8px;
  border: 1px solid #b2dfdb;
  transition: border-color 0.3s, box-shadow 0.3s;
  background: #e0f7fa;
  color: #00695c;
  font-size: 16px;
}
:deep(.el-input__inner:focus) {
  border-color: #26c6da;
  box-shadow: 0 0 0 2px rgba(41,182,246,0.18);
}

/* 验证码行 */
.captcha-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.captcha-img {
  height: 36px;
  border: 1px solid #b2dfdb;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 8px #b2dfdb;
}
.captcha-img:hover {
  border-color: #26c6da;
  box-shadow: 0 4px 12px #26c6da;
}

/* 注册按钮简洁统一 */
.el-button--primary {
  width: 100%;
  background: linear-gradient(135deg, #26c6da 0%, #1976d2 100%);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 4px 16px rgba(41,182,246,0.12);
  transition: background 0.3s, box-shadow 0.3s;
}
.el-button--primary:hover {
  background: linear-gradient(135deg, #1976d2 0%, #26c6da 100%);
  box-shadow: 0 8px 24px rgba(41,182,246,0.18);
}

/* 登录链接按钮 */
.el-button--link {
  margin-left: 0;
  color: #0097a7;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.el-button--link:hover {
  color: #1976d2;
  text-decoration: underline;
}

/* 响应式适配 */
@media (max-width: 600px) {
  .register-wrapper { max-width: 100vw; padding: 0 4px; }
  .register-card { padding: 18px 6px; }
  .register-header h2 { font-size: 20px; }
}
</style>
